@charset "UTF-8";
.bizList .Img::before, .bizRoundList .Img::before, .bizTxtList li, .fttList, .fttBg .bottom, .fttBg .top, .fttBg .item, .shareholderAreaArea, .fixedQuickLinkBox a {
  box-sizing: border-box;
}

.loadingLogo, .loadingLogoText::before, .bizList .Img::before, .bizRoundList .Img::before, .bizTxtList li, .bizTxtList h3, .bizTxtList p, .bizTxtList .detailBtn, .fttList .item::before, .fttBg .item::before, .fttList li:first-child .item::before, .fttList li:last-child .item::before, .fttBg .top, .shareholderList li, .featureList .Img::before, .featureList .Txt, .featureList .Txt::before, .fixedQuickLinkBox, .closeQLB::before, .closeQLB::after {
  transition: all .5s ease-out;
}

body.full .changePageArea {
  display: block;
}

body.full .changePageArea::before, body.full .changePageArea::after, body.full .changePageArea span {
  top: 0;
}

.changePageArea {
  display: none;
}

.loadingArea {
  position: fixed;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  height: 100vh;
  background-color: #fff;
  z-index: 100;
  background: #fff url("../images/menubg.jpg");
  transition: all .8s ease-out;
}

.loadingArea.show {
  opacity: 0;
  transition-delay: 2s;
  pointer-events: none;
}

.loadingArea.show .loadingLogo {
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}

.loadingArea.show .loadingLogoText::before {
  width: 0;
  transition-delay: .7s;
}

.loadingLogo, .loadingLogoText {
  line-height: 0;
}

.loadingLogo {
  margin-bottom: 20px;
  -webkit-transform: translateY(20px);
      -ms-transform: translateY(20px);
          transform: translateY(20px);
  opacity: 0;
}

.loadingLogoText {
  position: relative;
}

.loadingLogoText::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: url("../images/menubg.jpg");
}

#banner .fsiShow .titleLine::before {
  transition-delay: 1.3s;
}

#banner .fsiShow .titleLine::after {
  transition-delay: 1.7s;
}

.bannerText {
  max-width: 1640px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  letter-spacing: 7px;
}

.bannerText.textHL {
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.bannerText.textHR {
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.bannerText h1, .bannerText h2, .bannerText .txt {
  font-weight: 400;
}

.bannerText .txt {
  margin-bottom: 20px;
  padding-bottom: 20px;
  font-size: 52px;
}

.bannerText h1, .bannerText h2 {
  font-size: 24px;
  text-indent: 7px;
}

.scrollDown {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  z-index: 1;
  width: 16px;
  height: 75px;
  margin: auto;
  background: url("../images/scrolldown.png") 0 0 no-repeat;
  -webkit-animation: 2s scrollDown ease-out infinite;
          animation: 2s scrollDown ease-out infinite;
}

@-webkit-keyframes scrollDown {
  0%,
  100%,
  20%,
  50%,
  80% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-40%);
            transform: translateY(-40%);
  }
  60% {
    -webkit-transform: translateY(-30%);
            transform: translateY(-30%);
  }
}

@keyframes scrollDown {
  0%,
  100%,
  20%,
  50%,
  80% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-40%);
            transform: translateY(-40%);
  }
  60% {
    -webkit-transform: translateY(-30%);
            transform: translateY(-30%);
  }
}

.parallaxImg {
  position: absolute;
  z-index: -1;
}

.mainArea {
  padding-top: 0;
  padding-bottom: 0;
}

.titleBox {
  margin-bottom: 70px;
}

.titleBox h2 {
  padding-bottom: 20px;
}

.bizMapArea {
  position: relative;
  padding-top: 100px;
  padding-bottom: 130px;
}

.bizMapArea .wrap {
  position: relative;
  z-index: 1;
}

.bizMapArea .wrap::before {
  content: '';
  display: block;
  margin: auto;
  background: url("../images/bizmapround.png") 50% 50%/cover no-repeat;
  background-size:  100% 100%;
}

.bizMapArea .moreBtn {
  margin-top: 210px;
}

.bizMapArea .parallaxImg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.bizMapArea .parallaxImg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bizMapArea .wrap::before, .bizRoundList {
  width: 500px;
  height: 500px;
}

.bizList .current .Img::before, .bizRoundList .current .Img::before {
  opacity: 0;
  transition: opacity .5s ease-out .7s;
}

.bizList .Img, .bizRoundList .Img {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
}

.bizList .Img::before, .bizRoundList .Img::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin: auto;
  pointer-events: none;
}

.bizList .Img img, .bizRoundList .Img img {
  display: block;
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border: none;
}


.bizList .salad::before, .bizRoundList .salad::before {
  content: url("../images/gywm-tb-1.png");
  background-color: rgba(188, 206, 65, 0.7);
}
.bizList .salad2::before, .bizRoundList .salad2::before {
  content: url("../images/gywm-tb-2.png");
  background-color: rgba(14, 164, 101, 0.7);
}
.bizList .salad3::before, .bizRoundList .salad3::before {
  content: url("../images/gywm-tb-3.png");
  background-color: rgba(47, 171, 193, 0.7);
}
.bizList .salad4::before, .bizRoundList .salad4::before {
  content: url("../images/gywm-tb-4.png");
  background-color: rgba(188, 206, 65, 0.7);
}
.bizList .salad5::before, .bizRoundList .salad5::before {
  content: url("../images/gywm-tb-5.png");
  background-color: rgba(47, 171, 193, 0.7);
}
.bizList .salad6::before, .bizRoundList .salad6::before {
  content: url("../images/gywm-tb-6.png");
  background-color: rgba(17, 156, 91, 0.7);
}
.bizList .salad7::before, .bizRoundList .salad7::before {
  content: url("../images/gywm-tb-7.png");
  background-color: rgba(226, 207, 28, 0.7);
}
.bizList {
  display: none;
}

.bizRoundList {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  margin-top: -250px;
  margin-left: -250px;
}

.bizRoundList li {
  position: absolute;
  top: 54%;
  left: -43px;
  z-index: 1;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 280px;
  height: 160px;
  margin-top: -80px;
  -webkit-transform-origin: center right;
  -ms-transform-origin: center right;
  transform-origin: center right;
  transition: .8s ease-out;
}

.bizRoundList .current .Img {
  width: 400px;
  height: 400px;
  top: -169px;
  left: -218px;
  transition: width .3s ease-out .5s, height .3s ease-out .5s, top .3s ease-out .5s, left .3s ease-out .5s;
}

.bizRoundList .Img {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100px;
  height: 100px;
  top: 0;
  left: 0;
  transition: width .3s ease-out, height .3s ease-out, top .3s ease-out, left .3s ease-out;
}

.bizRoundList .Txt {
  display: none;
}

.bizTxtList {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  width: 390px;
  height: 255px;
  margin-top: -127.5px;
  margin-left: -195px;
}

.bizTxtList li {
  position: absolute;
  top: 16px;
  left: 0;
  z-index: 1;
  width: 100%;
  padding-left: 108px;
  pointer-events: none;
  opacity: 0;
}

.bizTxtList li.current {
  z-index: 2;
  pointer-events: auto;
  opacity: 1;
}

.bizTxtList li.current h3, .bizTxtList li.current p, .bizTxtList li.current .detailBtn {
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}

.bizTxtList li.current h3 {
  transition-delay: .5s;
}

.bizTxtList li.current p {
  transition-delay: .7s;
  color:#fff;
  font-size: 12px;
}

.detailBtn {
  display: block;
  line-height: 43px;
  border-radius: 20px;
  color: #fff;
  text-align: center;
  font-size: 14px;
  letter-spacing: 2px;
  background: #54a946;
  font-family: 'Noto Sans TC', '微軟正黑體', sans-serif;
  font-weight: 300;
}

.detailBtn:hover {
  color: #fff;
  background-position: right 25px top 50%;
}

.bizTxtList li.current .detailBtn {
  transition-delay: 1s;
}

.bizTxtList h3, .bizTxtList p, .bizTxtList .detailBtn {
  -webkit-transform: translateY(20px);
      -ms-transform: translateY(20px);
          transform: translateY(20px);
  opacity: 0;
}

.bizList .Txt h3, .bizRoundList .Txt h3, .bizTxtList .Txt h3 {
  display: inline-block;
  margin-bottom: 30px;
  padding-left: 5px;
  padding-right: 5px;
}

.bizList .Txt h3 a, .bizRoundList .Txt h3 a, .bizTxtList .Txt h3 a {
  display: inline;
  font-size: 26px;
  letter-spacing: 2px;
  font-weight: bold;
  color:#fff;
}
.bizTxtList .Txt h3 a i{display:block;position:absolute;left:0;bottom: -8px;width:100%;height:10px;background:#23a9ff;border-radius:50px;}
.bizTxtList .Txt h3 a>span{position:relative;z-index:2;}
.bizList .Txt p, .bizRoundList .Txt p, .bizTxtList .Txt p {
  padding-left: 5px;
  line-height: 1.8;
  letter-spacing: 1px;
}

.bizList .detailBtn, .bizRoundList .detailBtn, .bizTxtList .detailBtn {
  width: 140px;
  margin-top: 30px;
}

.prevLineArrow, .nextLineArrow {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  border: none;
  outline: none;
  cursor: pointer;
  background-color: transparent;
}

.prevLineArrow::before, .prevLineArrow::after, .nextLineArrow::before, .nextLineArrow::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 20px;
  height: 2px;
  margin-top: -1px;
  background-color: #262626;
}

.prevLineArrow {
  left: 10px;
}

.prevLineArrow::before, .prevLineArrow::after {
  left: 10px;
}

.prevLineArrow::before {
  -webkit-transform-origin: left bottom;
      -ms-transform-origin: left bottom;
          transform-origin: left bottom;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.prevLineArrow::after {
  -webkit-transform-origin: left top;
      -ms-transform-origin: left top;
          transform-origin: left top;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

.nextLineArrow {
  right: 10px;
}

.nextLineArrow::before, .nextLineArrow::after {
  right: 10px;
}

.nextLineArrow::before {
  -webkit-transform-origin: right bottom;
      -ms-transform-origin: right bottom;
          transform-origin: right bottom;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

.nextLineArrow::after {
  -webkit-transform-origin: right top;
      -ms-transform-origin: right top;
          transform-origin: right top;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.fttArea {
  position: relative;
}

.fttArea.fsiShow .fttList li:first-child .item::before, .fttArea.fsiShow .fttList li:last-child .item::before {
  transition-delay: .9s;
}

.fttArea.fsiShow .fttList li:first-child p, .fttArea.fsiShow .fttList li:last-child h3 {
  transition-delay: 1.3s;
}

.fttArea.fsiShow .fttList li:first-child h3, .fttArea.fsiShow .fttList li:last-child p {
  transition-delay: 1.7s;
}

.fttArea.fsiShow .fttList li:first-child .item::before {
  width: 315px;
}

.fttArea.fsiShow .fttList li:last-child .item::before {
  width: 290px;
}

.fttArea .wrap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 1500px;
  margin: auto;
}

.fttArea .moreBtn {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  margin-top: -90px;
}

.fttList .item::before, .fttBg .item::before {
  content: '';
  position: absolute;
  z-index: -1;
  background-position-y: 50%;
  background-repeat: no-repeat;
  pointer-events: none;
}

.fttList h3, .fttBg h3 {
  font-size: 48px;
  color: #e2cf1c;
  letter-spacing: 3px;
  font-family: 'Noto Sans TC', '微軟正黑體', sans-serif;
  font-weight: 300;
}

.fttList {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  height: 100%;
}

.fttList li {
  position: relative;
  max-width: 425px;
  color: #fff;
  line-height: 2;
  letter-spacing: 2px;
}

.fttList li:first-child {
  margin-top: 180px;
}

.fttList li:first-child .item::before {
  right: -120px;
  bottom: -176px;
  width: 0;
  height: 165px;
  background-image: url("../images/fttarcdown.png");
  background-position-x: 100%;
}

.fttList li:last-child {
  margin-top: auto;
  margin-bottom: auto;
}

.fttList li:last-child .item::before {
  left: -180px;
  top: -120px;
  width: 0;
  height: 170px;
  background-image: url("../images/fttarcup.png");
  background-position-x: 0;
}

.fttList .item {
  position: relative;
}

.fttBg {
  position: relative;
}

.fttBg .bottom, .fttBg .top {
  line-height: 0;
}

.fttBg .top {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 0;
  height: 100%;
  overflow: hidden;
}

.fttBg .top img {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  height: 100%;
  object-fit: cover;
}

.fttBg .bottom img {
  display: block;
  width: 100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.fttBg .item {
  display: none;
}

.newsArea {
  position: relative;
  z-index: 2;
  padding-top: 120px;
  padding-bottom: 90px;
  background: url("../images/menubg.jpg");
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
          clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
}

.newsList {
  margin-bottom: 60px;
}

.newsList li {
  border-bottom: 1px dashed #dfdfdf;
}

.newsList li:first-child {
  border-top: 1px dashed #dfdfdf;
}

.newsList .Txt {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding-top: 10px;
  padding-bottom: 10px;
}

.newsList .date, .newsList .newIcon {
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  margin-right: 20px;
}

.newsList .date {
  font-size: 13px;
  letter-spacing: 1px;
}

.newsList h3 {
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  width: calc(100% - 200px);
}

.newsList h3 a {
  display: block;
  letter-spacing: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.newsList h3 a:hover {
  color: #262626;
  text-decoration: underline;
}

.shareholderAreaArea {
  position: relative;
  height: 770px;
  padding-top: 160px;
  overflow: hidden;
}

.shareholderAreaArea.displacement {
  margin-top: -80px;
}

.shareholderAreaArea .titleBox h2 {
  color: #fff;
}

.shareholderAreaArea .titleBox em {
  color: #eee;
}

.shareholderAreaArea .parallaxImg {
  top: 0;
  left: 0;
}

.shareholderList {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.shareholderList li {
  position: relative;
  top: 0;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 205px;
  height: 230px;
  background-position: 50%;
  background-repeat: no-repeat;
  -webkit-filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.2));
          filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.2));
}

.shareholderList li:hover {
  top: -5px;
  -webkit-filter: drop-shadow(0 10px 5px rgba(0, 0, 0, 0.2));
          filter: drop-shadow(0 10px 5px rgba(0, 0, 0, 0.2));
}

.shareholderList li:nth-child(2) {
  margin-top: 60px;
}

.shareholderList li:last-child {
  margin-top: 0;
}

.shareholderList a {
  display: block;
  font-size: 18px;
  font-family: 'Noto Sans TC', '微軟正黑體', sans-serif;
  font-weight: 350;
  text-align: center;
  color: #fff;
  letter-spacing: 3px;
  text-indent: 3px;
}

.shareholderList .finance {
  background-image: url("../images/hexagon01.png");
}

.shareholderList .shareholder {
  background-image: url("../images/hexagon02.png");
}

.shareholderList .factory {
  background-image: url("../images/hexagon03.png");
}

.shareholderList img {
  display: block;
  margin: 0 auto 20px;
  max-width: 100%;
  height: auto;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.featureArea {
  position: relative;
  padding-top: 100px;
  padding-bottom: 110px;
  overflow: hidden;
  background-color: #fff;
}

.featureArea::before, .featureArea::after {
  content: '';
  position: absolute;
  z-index: 0;
  background-position: 50%;
  background-repeat: no-repeat;
}

.featureArea::before {
  right: 0;
  top: 0;
  width: 730px;
  height: 355px;
  background-image: url("../images/bizmasktr.png");
}

.featureArea::after {
  left: 0;
  bottom: 0;
  width: 607px;
  height: 270px;
  background-image: url("../images/bizmaskbl.png");
}

.featureArea .wrap {
  position: relative;
  z-index: 1;
  width: 1500px;
}

.featureList.showAll .Img::before, .featureList .current .Img::before {
  opacity: 0;
}

.featureList.showAll .showImg, .featureList .current .showImg {
  z-index: 2;
  pointer-events: auto;
}

.featureList.showAll .Txt, .featureList .current .Txt {
  bottom: -5px;
  opacity: 1;
}

.featureList.showAll .Txt::before, .featureList .current .Txt::before {
  height: 50px;
  transition-delay: 1.2s;
}

.featureList.showAll .focus .showImg {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  box-shadow: none;
}

.featureList .focus .showImg {
  -webkit-transform: scale(1.2);
      -ms-transform: scale(1.2);
          transform: scale(1.2);
  box-shadow: -2px 0 27px rgba(0, 0, 0, 0.3);
  opacity: 1;
  transition: opacity .5s ease-out, box-shadow .3s ease-out .5s, -webkit-transform .3s ease-out .8s;
  transition: opacity .5s ease-out, transform .3s ease-out .8s, box-shadow .3s ease-out .5s;
  transition: opacity .5s ease-out, transform .3s ease-out .8s, box-shadow .3s ease-out .5s, -webkit-transform .3s ease-out .8s;
}

.featureList .item {
  position: relative;
  padding-top: 50px;
  padding-bottom: 110px;
}

.featureList .Img {
  position: relative;
  line-height: 0;
}

.featureList .Img::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  margin: auto;
  background-color: #000;
  opacity: .6;
}

.featureList .Txt {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  z-index: 2;
  max-width: 365px;
  margin: auto;
  opacity: 0;
}

.featureList .Txt::before {
  content: '';
  position: absolute;
  bottom: 60px;
  left: 50%;
  z-index: 1;
  width: 1px;
  height: 0;
  background-color: #ccc;
}

.featureList .Txt p {
  line-height: 1.8;
  letter-spacing: 3px;
  text-align: center;
}

.featureList .showImg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2);
  opacity: 0;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  pointer-events: none;
  transition: opacity .5s ease-out, box-shadow .3s ease-out, -webkit-transform .3s ease-out;
  transition: opacity .5s ease-out, transform .3s ease-out, box-shadow .3s ease-out;
  transition: opacity .5s ease-out, transform .3s ease-out, box-shadow .3s ease-out, -webkit-transform .3s ease-out;
}

.featureList img {
  display: block;
  width: 100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.featureList .prevArrow, .featureList .nextArrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  margin-top: -20px;
}

.featureList .prevArrow {
  left: 25%;
}

.featureList .nextArrow {
  right: 25%;
}

.fixedQuickLinkBox {
  position: fixed;
  top: 50%;
  left: 0;
  z-index: 50;
  margin-top: -120px;
}

.fixedQuickLinkBox.hide {
  left: -80px;
}

.fixedQuickLinkBox.hide .closeQLB {
  right: -15px;
}

.fixedQuickLinkBox a {
  position: relative;
  display: block;
  width: 80px;
  height: 80px;
  padding-top: 15px;
  color: #fff;
  font-size: 13px;
  letter-spacing: 2px;
  text-align: center;
  font-family: 'Noto Sans TC', '微軟正黑體', sans-serif;
  font-weight: 300;
}

.fixedQuickLinkBox a::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
  margin: auto;
  background: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.1) 100%) no-repeat;
}

.fixedQuickLinkBox img {
  display: block;
  max-width: 100%;
  height: 25px;
  margin: 0 auto 7px;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.fixedQuickLinkBox .finance {
  background-color: #2b7e3e;
}

.fixedQuickLinkBox .finance:hover {
  background-color: #256b35;
}

.fixedQuickLinkBox .shareholder {
  background-color: #54a946;
}

.fixedQuickLinkBox .shareholder:hover {
  background-color: #4b973f;
}

.fixedQuickLinkBox .recruit {
  background-color: #cabc00;
}

.fixedQuickLinkBox .recruit:hover {
  background-color: #b1a400;
}

.closeQLB {
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 2;
  width: 20px;
  height: 20px;
  border: none;
  outline: none;
  border-radius: 50%;
  cursor: pointer;
  background-color: #2a2920;
  transition: .3s ease-out;
}

.closeQLB:not(.close):hover {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}

.closeQLB.close::before, .closeQLB.close::after {
  width: 6px;
  left: 4px;
}

.closeQLB::before, .closeQLB::after {
  content: '';
  position: absolute;
  left: 1px;
  width: 12px;
  height: 1px;
  margin-left: 5px;
  background-color: #fff;
}

.closeQLB::before {
  top: 6px;
  -webkit-transform-origin: left top;
      -ms-transform-origin: left top;
          transform-origin: left top;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

.closeQLB::after {
  bottom: 5px;
  -webkit-transform-origin: left bottom;
      -ms-transform-origin: left bottom;
          transform-origin: left bottom;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

/*stupid ie*/
@media screen and (min-width: 0\0) {
  .shareholderList a {
    white-space: nowrap;
  }
  .fttList li:last-child {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    height: 100%;
  }
}

@media (max-width: 1715px) and (min-width: 1386px) {
  .fttArea .wrap {
    width: 1340px;
  }
}

@media (max-width: 1715px) {
  .fixedQuickLinkBox {
    top: 80%;
  }
}

@media (max-width: 1540px) {
  .featureArea .wrap {
    width: 100%;
  }
}

@media (max-width: 1480px) {
  .bannerText h1, .bannerText h2 {
    margin-bottom: 0;
  }
}

@media (max-width: 1385px) {
  .fttArea .wrap {
    width: 100%;
  }
  .fttList {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 1360px) and (min-width: 900px) {
  .shareholderList li + li {
    margin-left: 100px;
  }
}

@media (max-width: 1360px) {
  .newsList {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }
  .shareholderList {
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .bizRoundList .current .Img {
    width: 400px;
    height: 400px;
    top: -130px;
    left: -120px;
  }
}

@media (max-width: 1280px) {
  .fttList .item::before {
    display: none;
  }
}

@media (max-width: 1280px) {
  .fttList li {
    max-width: 33%;
  }
  .fttList li:first-child {
    margin-top: auto;
    margin-bottom: auto;
  }
}

@media (max-width: 1180px) {
  .fixedQuickLinkBox {
    display: none;
  }
  .bizRoundList, .bizTxtList {
    display: none;
  }
  .bizMapArea .wrap {
    padding-top: 250px;
  }
  .bizMapArea .wrap::before {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -400px;
  }
  .bizMapArea .moreBtn {
    margin-top: 100px;
  }
  .bizList {
    display: block;
  }
  .bizList .item {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    margin-left: 5%;
  }
  .bizList .Img {
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    width: 300px;
    height: 300px;
    margin-right: 30px;
  }
  .bizList .Img::before {
    display: none;
  }
  .bizList .Txt {
    max-width: 390px;
  }
}

@media (min-width: 961px) {
  .fttArea.fsiShow .fttBg .top {
    width: 50%;
    transition-delay: .5s;
  }
}

@media (max-width: 960px) {
  .bannerText .txt {
    font-size: 30px;
  }
  .bannerText h1, .bannerText h2 {
    font-size: 20px;
  }
  .scrollDown {
    display: none;
  }
  .featureList .prevArrow {
    left: 10px;
  }
  .featureList .nextArrow {
    right: 10px;
  }
  .fttArea .wrap {
    display: none;
  }
  .fttArea .moreBtn {
    margin-top: -70px;
  }
  .fttArea .top img {
    height: auto;
    max-width: 100%;
    height: auto;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
  }
  .fttBg .top, .fttBg .bottom {
    position: relative;
  }
  .fttBg .top {
    width: 100%;
  }
  .fttBg .top img {
    position: static;
  }
  .fttBg .top .item {
    right: 0;
    margin-right: 20px;
    text-align: right;
  }
  .fttBg .bottom .item {
    left: 0;
    margin-left: 20px;
  }
  .fttBg .item {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    max-width: 425px;
    line-height: 1.8;
    color: #fff;
  }
}

@media (max-width: 900px) {
  .shareholderList li:nth-child(2) {
    margin-top: 0;
  }
  .bizList .item {
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-left: 0;
  }
}

@media (max-width: 900px) and (min-width: 641px) {
  .bizMapArea .wrap {
    padding-top: 140px;
  }
  .bizMapArea .wrap::before {
    width: 600px;
    height: 600px;
    margin-left: -300px;
  }
}

@media (max-width: 768px) {
  .titleBox {
    margin-bottom: 30px;
  }
  .featureArea {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .featureArea .slick-dots {
    margin-top: 20px;
  }
  .featureList .focus .showImg {
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
  }
  .featureList .item {
    padding-top: 20px;
    padding-bottom: 75px;
  }
  .shareholderAreaArea {
    height: auto;
    padding-bottom: 80px;
  }
  .bizMapArea {
    padding-top: 40px;
    padding-bottom:  40px;
  }
}

@media (max-width: 680px) {
  .shareholderList li {
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    width: auto;
    height: 180px;
    background-size: contain;
  }
}

@media (max-width: 640px) {
  .newsArea {
    padding-top: 50px;
    padding-bottom: 50px;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 95%, 50% 100%, 0 95%);
            clip-path: polygon(0 0, 100% 0, 100% 95%, 50% 100%, 0 95%);
  }
  .newsList .Txt {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
  }
  .newsList h3 {
    width: 100%;
    margin-top: 5px;
  }
  .fttBg .item {
    max-width: 60%;
  }
  .fttBg h3 {
    font-size: 30px;
  }
  .bizMapArea .wrap {
    padding-top: 30px;
  }
  .bizMapArea .wrap::before {
    display: none;
  }
  .bizMapArea .moreBtn {
    margin-top: 50px;
  }
  .bizList .item {
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .bizList .Img {
    margin-right: 0;
    margin-bottom: 30px;
  }
  .bizList .Txt {
    text-align: center;
  }
  .bizList .Txt p {
    padding-left: 0;
    color:  #fff;
  }
  .bizList .detailBtn {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 540px) {
  .bannerText {
    letter-spacing: 3px;
  }
  .bannerText .txt {
    margin-bottom: 10px;
    padding-bottom: 10px;
    font-size: 16px;
  }
  .bannerText h1, .bannerText h2 {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .shareholderList img {
    width: 40px;
    margin-bottom: 5px;
  }
  .shareholderList a {
    font-size: 14px;
  }
  .prevLineArrow {
    left: 0;
  }
  .nextLineArrow {
    right: 0;
  }
}

@media (max-width: 400px) {
  .bizList .Img {
    width: 250px;
    height: 250px;
  }
}
